<script setup lang="ts">
import {computed, defineComponent, ref} from "vue";
import {activeGlobalItem, tempActiveItem} from "@/components/formDesigner/select.ts";
import draggable from "vuedraggable";
import DesignItem from "@/components/formDesigner/DesignItem.vue";
import {ElMessage} from "element-plus";
defineComponent({
  name: 'custom-el-row'
})
const emit = defineEmits(['update:activeItem'])
const props = defineProps({
  field: Object,
})

const options = computed(() => {
  return props.field?.options
})

const handleClick = () => {
  activeGlobalItem.value = props.field
}

const onAdd = (evt: any, list: any) => {
  console.log("新加", evt)
  // 判断是否拖拽到当前组件中
  if (evt.to.className.includes('row-drag')) {
    // 判断 tempActiveItem 是否有值 并且不是 row
    if (tempActiveItem.value && tempActiveItem.value?.layout != 'rowItem') {
      list.push(tempActiveItem.value)
    }else {
      ElMessage.error('该组件不能放到该组件内')
    }
  }
}

</script>

<template>
  <div class="row-box" :class="{'row-box-border': activeGlobalItem?.id == field?.id}"  @click.stop="handleClick">
    <el-row :gutter="options.gutter">
      <el-col class="el-col-border" v-for="(item, index) in field?.options.columns" :key="index" :span="item.span">
        <draggable
            v-model:list="item.list"
            :animation="400"
            class="drag-wrapper row-drag"
            group="componentsGroup"
            draggable=".drawing-item"
            @add="onAdd($event, item.list)"
        >
          <template #item="{element}">
            <DesignItem
                :model="element"
                :element="element"
            />
          </template>
        </draggable>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.row-box {
  height: 100%;
}

.el-col-border {
  min-height: 42px;
  border: 1px solid #ccc;
}

.drag-wrapper {
  width: 100%;
  min-height: 42px;
}
</style>
